<template>
  <el-row class="tac">
  <el-col :span="3">
    <img src="../assets/whpu.png" class="logo">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-menu-item index="1">
        <i class="el-icon-s-home"></i>
        <template #title>首页</template>
      </el-menu-item>
      <el-submenu index="2">
        <template #title>
          <i class="el-icon-document"></i>
          <span>文档</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-3">
            <i class="el-icon-reading"></i>文字
          </el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template #title>
             <i class="el-icon-picture"></i>图片
            </template>
          <el-menu-item index="2-4-1">png</el-menu-item>
          <el-menu-item index="2-4-1">jpg</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3">
        <i class="el-icon-menu"></i>
        <template #title>选项</template>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-date"></i>
        <template #title>日期</template>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="20">
      <el-row class="head">
        <i class="el-icon-d-arrow-left"></i>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }" class="headText">首页</el-breadcrumb-item>
          <el-breadcrumb-item>首页</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <el-row>
         <el-table :data="tableData" stripe style="width: 100%; height:800px; margin-left:50px"  height="250">
          <el-table-column fixed prop="date" label="日期" width="150">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column  prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
         </el-table>
      </el-row>
  </el-col>
</el-row>

<!-- 你是谁 -->
</template>

<script>
import { onBeforeMount, reactive, toRefs } from 'vue'
import axios from 'axios'
export default {
  setup () {
    console.log('setup')
    const state = reactive({
      activeIndex: '1',
      activeIndex2: '1',
      tableData: []
    })
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleEdit = (index, row) => console.log(index, row)
    const handleDelete = (index, row) => console.log(index, row)
    onBeforeMount(() => {
      console.log('onBeforeMount')
      //  axios.get('http:localhost:7001/api/listData.php').then(res => {
      axios.get('http://localhost:7001/person/getAll').then(res => {
        console.log('res')
        console.log(res)
        // axios.get('/api/listData.php').then(res => {
        // state.tableData = res.data
        state.tableData = res.data.data
      }).catch(err => console(err))
    })
    return {
      ...toRefs(state),
      handleClose,
      handleOpen,
      handleEdit,
      handleDelete
    }
  }
}
</script>
<style scoped>
.logo{
  width:100%;
}
.head{
  height: 50px;
  margin-top: 15px;
}
.head .headText{
  margin-left: 15px;
}
</style>
